<template>
  <div>
    <van-form @submit="methods.onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="my.ophone"
          name="原号码"
          label="原号码"
          placeholder="请输入原号码"
        />
        <van-field
          v-model="my.newphone"
          name="新号码"
          label="新号码"
          placeholder="请输入新号码"
        />

        <van-field
          v-model="my.qphone"
          name="确认号码"
          label="确认号码"
          placeholder="确认号码"
        />
      </van-cell-group>
      <van-cell-group style="padding-left: 15px">
        <van-field
          v-model="my.sms"
          label="验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              type="primary"
              @click="methods.getVerificationCode"
              :loading="loading"
              style="min-width: 77.6px"
              size="small"
              >{{ buttonText }}</van-button
            >
          </template>
        </van-field>
      </van-cell-group>

      <div style="margin: 16px">
        <van-button  block type="primary" native-type="submit">
          修改账号信息
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { SENDMESSAGE } from "@/api/login";
import { updateAccount } from "@/api/me";
import { showToast } from "vant";
import { ref } from "vue";
const loading = ref(false);
const phoneNumber = ref("");
const buttonText = ref("获取验证码");
const my = ref({
  ophone: "",
  newphone: "",
  qphone: "",
  sms: "",
});

const methods = {
  onSubmit: async () => {
    if (my.value.ophone === "") {
      showToast("请输入原号码");
      return;
    }
    if (my.value.newphone === "") {
      showToast("请输入新号码");
      return;
    }
    if(my.value.newphone.trim().length !== 11){
        showToast("号码长度必须为11位");
      return;
    }
    if (my.value.qphone !== my.value.newphone) {
      showToast("请确认号码是否一致");
      return;
    }
    if (my.value.sms === "") {
      showToast("请输入短信验证码");
      return;
    }
    const res = await updateAccount({
      phone: my.value.ophone,
      newphone: my.value.newphone,
      rePhone: my.value.qphone,
      sms: my.value.sms,
    });


    if(res.result===0){
        console.log(res,";;;;;;;;");
      showToast("修改成功");
    }else{
      showToast(res.msg);
    }
  },
  getVerificationCode:async () => {
    if (my.value.ophone === "") {
      showToast("请输入原号码");
      return;
    }

    if(my.value.ophone.trim().length !== 11){
        showToast("号码长度必须为11位");
      return;
    }
    // 模拟获取验证码的异步操作
    loading.value = true;
  const res =await  SENDMESSAGE({
      account: my.value.ophone,
    });

    if(res.result===0){
        loading.value = false;
        methods.countDown();
    }else{
        setTimeout(() => {
          loading.value = false;
          showToast(res.message);
        },5000)
    }
  },
  countDown: () => {
    let count = 60;
    buttonText.value = `${count}秒后重新获取`;
    const timer = setInterval(() => {
      count--;
      if (count > 0) {
        buttonText.value = `${count}秒后重新获取`;
      } else {
        clearInterval(timer);
        buttonText.value = "获取验证码";
      }
    }, 1000);
  },
};
</script>

<style  scoped>
</style>